<template>
  <view
    class="custom-tag"
    v-if="text"
    :style="{ background: backgroundColor, padding, borderRadius, border }"
  >
    <text :style="{ color, fontSize, lineHeight }">{{ text }}</text>
  </view>
</template>
<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  defineProps({
    text: propTypes.string.def(''),
    backgroundColor: propTypes.string.def(''),
    color: propTypes.string.def(''),
    fontSize: propTypes.string.def('24rpx'),
    lineHeight: propTypes.string.def('32rpx'),
    padding: propTypes.string.def('4rpx 20rpx'),
    borderRadius: propTypes.string.def('4rpx'),
    border: propTypes.string.def('none'),
  });
</script>
<style lang="scss" scoped>
  .custom-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4rpx;
    white-space: nowrap;
  }
</style>
